<template>
  <div id="app">
    <!--顶部-->
    <siteTop v-show="mounted"></siteTop>

    <!--导航栏-->
    <navBar v-show="mounted"></navBar>

    <router-view v-if="isRouterAlive"></router-view>

    <foot  v-show="mounted" :footInfo = this.info></foot>
  </div>
</template>

<script>
import {homeMyInfo} from '@/network/home/home'
import {accessRecords} from './network/app/appInfo'

import siteTop from "./components/content/siteTop/siteTop"
import navBar from "./components/content/navBar/navBar"
import foot from "@/components/content/foot/foot"

export default {
  name: "App",
  components: {
    navBar,
    siteTop,
    foot,
    //刷新路由的参数
  },
  data(){
    return{
      info:'',
      isRouterAlive:true
    }
  },
  //provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性
  //使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据
  provide(){
    return{
      reload:this.reload
    }
  },
  methods:{
    //刷新页面的方法
    reload(){
      this.isRouterAlive = false
      this.$nextTick( () => {
        this.isRouterAlive = true
      })
    }
  },
  computed: {
    // 判断路由
    mounted() {
      this.path = this.$route.path;
      switch (this.path) {
        case "/imgDown/imgForm":
          return false
          break
        case "/chat/cahtForm":
          return false
          break
        case "/message/messageForm":
          return false
          break
        default:
          return true
      }
    }
  },
  created(){
    //获取首页信息
     homeMyInfo().then( res => {
            this.info = res.data.result[0]
        }).catch( err => {
            console.log(err)
        })
      //记录访问信息
      accessRecords().then( res => {
          //console.log(res)
      }).catch( err => {
          console.log(err)
      })
  }
}
</script>

<style lang="scss">
@import "./assets/css/base.css";
</style>
